<template>
    <div class="container options">
        <div class="pc-box">
         <div class="options_title l-f l-row-sb">
            <p class="options_title_label">{{$t('header.optionTrading')}}</p>
            <a-button @click="onHistory" class="options_title_btn">{{$t('aiTrading.tradeHistory')}}</a-button>
        </div>
       </div>
       <!-- h5 -->
       <div class="h5-box">
            <div class="options_title">
                <p class="options_title_label">Tether Gold {{$t('option.market')}}</p>
                <p class="options_title_desc">{{$t('header.contractTrading')}}</p>
            </div>
            <Tabs :current="1" />
       </div>

        <div class="options_content l-f l-col-stretch">
             <div class="options_content_left">
                <FormBox ref="formRef" @submit="onSubmit" />
            </div>
            <div class="options_content_right">
                <EChartLine />
            </div>
        </div>
        <!-- 优势 -->
         <div class="advantage pc-box">
            <div class="advantage_question">
                <p class="advantage_question_title">{{$t('contract.whatIsContractTrading')}}</p>
                <p class="advantage_question_desc">{{$t('contract.whatIsContractTradingDesc')}}</p>
            </div>
            <div class="advantage_title">{{$t('option.advantages')}}</div>
            <div class="advantage_list">
                <div class="advantage_list_item" v-for="(item,index) in advantageList" :key="index">
                    <div class="advantage_list_item_title l-f">
                        <img class="advantage_list_item_title_icon" src="@/assets/icons/icon-advantage.svg" />
                        <p class="advantage_list_item_title_label">{{item.title}}</p>
                    </div>
                    <p class="advantage_list_item_desc">{{item.desc}}</p>
                </div>
            </div>
         </div>
         <!-- 订单 -->
          <div class="orders">
            <a-tabs @change="tabChange" class="orders_tabs">
                <a-tab-pane key="0" :tab="$t('account.positions')">
                  <div class="orders_scroll">
                    <NoData
                    v-if="listData.length === 0 && isLoadEnd"
                    :title="$t('account.oops')"
                    :desc="$t('account.oopsDesc')"
                  />
                  <template v-else>
                    <ContractItem
                      v-for="item in listData"
                      :key="item.id"
                      :options="item"
                      :type="0"
                      @close="getListData"
                    />
                  </template>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="1" :tab="$t('account.openOrders')">
                 <div class="orders_scroll">
                    <NoData
                    v-if="listData.length === 0 && isLoadEnd"
                    :title="$t('account.oops')"
                    :desc="$t('account.oopsDesc')"
                  />
                  <template v-else>
                    <ContractItem
                      v-for="item in listData"
                      :key="item.id"
                      :options="item"
                      :type="1"
                      @close="getListData"
                    />
                  </template>
                  </div>
                </a-tab-pane>
              </a-tabs>
          </div>
    </div>
</template>

<script setup>
    import { ref, onMounted, computed } from 'vue'
    import { useI18n } from 'vue-i18n'
    import { message } from 'ant-design-vue'
    import { postContractSubmitApi, getContractOrderListApi } from '@/api/tradeApi'
    import { COIN } from '@/common/index.js'
    import { useMainStore } from '@/store'
    import { useRouter } from 'vue-router'

    import NoData from "@/components/noData/index.vue";
    import EChartLine from '@/components/eChartLine/index.vue'
    import ContractItem from '@/views/record/components/contract-item/index.vue'
    import FormBox from './components/formBox/index.vue'
    import Tabs from '@/views/optionTrading/components/tabs/index.vue'

    const { t } = useI18n()
    const router = useRouter()
    const mainStore = useMainStore()

    const formRef = ref(null)

    const listData = ref([])
    const isLoadEnd = ref(false)
    const currentTab = ref(0)

    const advantageList = computed(() => {
        return [
            {
                title: t('contract.riskManagement'),
                desc: t('contract.riskManagementDesc'),
            },
            {
                title: t('contract.leverage'),
                desc: t('contract.leverageDesc'),
            },
            {
                title: t('contract.priceDiscovery'),
                desc: t('contract.priceDiscoveryDesc'),
            },
            {
                title: t('contract.portfolioDiversification'),
                desc: t('contract.portfolioDiversificationDesc'),
            }
        ]
    })

    onMounted(() => {
        getListData()
    })

    // tab 切换事件
    const tabChange = (index) => {
        currentTab.value = Number(index)
        getListData()
    }

    const onHistory = () => {
        router.push({name: 'record', params: {
            index: 2
        }})
    }

    const onSubmit = async (obj) => {
        const res = await postContractSubmitApi({
            u: obj.number,
            share: obj.number,
            multiple: 100,
            legal_id: 23,
            currency_id: COIN.id,
            type: obj.buyType === 0 ? 1 : 2,
            status: obj.orderType === 0 ? 0 : 1,
            target_price: obj.targetPrice,
            target_profit_price: obj.takeProfit,
            stop_loss_price: obj.stopLose,
			warehouse_type: 1,
			currency_name: COIN.name + '/USDT'
        })
        message.success(res)
        mainStore.getUserBalance()
        formRef.value.resetForm()
        getListData()
    }

    // 获取合约订单
    const getListData = async() => {
        let status = 1;
        listData.value = []
        isLoadEnd.value = false
        switch (currentTab.value) {
            case 0:
            status = 1;
            break;
            case 1:
            status = 99;
            break;
            case 2:
            status = 3;
            break;
            case 3:
            status = 4;
            break;
        }
        const res = await getContractOrderListApi({
            status: status,
            page: 1,
            limit: 9999
        })
        listData.value = res.data
        isLoadEnd.value = true;
    }

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>